<template>
    <div class="monitor_item">
        <p class="no">{{info.jarCode}}</p>
        <div class="monitor_main flex-row">
            <div class="monitor_side">
                <div class="monitor_rules flex-column">
                    <span class="rule" v-for="item in rules" :key="item">{{item}}cm</span>
                </div>
                <div class="monitor_coontainer">
                    <div class="info flex-column">
                        <span class="status_text" v-if="info.alarmStatus==0">正常</span>
                        <span class="volume" v-if="info.status!='inactive'">{{info.curLevel}}cm</span>
                    </div>
                    <div :class="['monitor_deep',showClass]" :style="{'height':(info.curLevel/info.jarHeight)* 100 +'%'}"></div>
                </div>
            </div>
            <div class="monitor_info">
                <div class="info_item flex-row">
                    <span class="label">储液罐名称：</span>
                    <p class="desc">{{info.jarName}}</p>
                </div>
                <div class="info_item flex-row">
                    <span class="label">设备名称：</span>
                    <p class="desc">{{info.deviceName}}</p>
                </div>
                <div class="info_item flex-row">
                    <span class="label">通信状态：</span>
                    <p :class="['desc flex-row',info.status=='active'?'normal':'off']">
                        <span class="status"></span>
                        <span class="status_text">{{info.status=='active'?'在线':'离线'}}</span>
                    </p>
                </div>
                <div class="info_item flex-row">
                    <span class="label">液位状态：</span>
                    <p :class="['desc flex-row',info.alarmStatus==0?'normal':'warn']">
                        <span class="status"></span>
                        <span class="status_text">
                            <field-tag
                                :value="info.alarmStatus"
                                type="value"
                                showType="name"
                                :data="alarmStatus"
                            ></field-tag>
                        </span>
                    </p>
                </div>
                <div class="info_item flex-row">
                    <span class="label">更新时间：</span>
                    <p class="desc">{{info.updateTime}}</p>
                </div>
                <div class="info_item flex-row">
                    <span class="label">所在位置：</span>
                    <p class="desc">{{info.factoryName}}-{{info.lineName}}</p>
                </div>
                <div class="info_item flex-row">
                    <span class="label">负责人：</span>
                    <p class="desc">{{info.userName}}</p>
                </div>
            </div>
        </div>
        <div class="monitor_controls flex-row">
            <a-button type="link" :disabled="hasPerm(['liquid:monitor:info'])" @click="showInfo('isShowInfo')">详情</a-button>
            <a-button type="link" :disabled="hasPerm(['liquid:monitor:history'])" @click="showInfo('isHistory')">历史</a-button>
            <a-button type="link" :disabled="hasPerm(['liquid:monitor:log'])" @click="showInfo('isLog')">日志</a-button>
            <a-button type="link" :disabled="hasPerm(['liquid:monitor:control'])" @click="showInfo('isControl')">操作</a-button>
        </div>
    </div>
</template>
<script>
import {alarmStatus} from '../dictionary'
export default {
    name:"TankItem",
    props:{
        info:{
            type:Object,
            default:()=>{}
        }
    },
    data(){
        return{
            alarmStatus,
            rules:[]
        }
    },
    computed:{
        showClass(){
            let {alarmStatus,status} = this.info;
            let type = ''
            if(alarmStatus=='1' || alarmStatus=='2'){
                type='high'
            }else if(alarmStatus=='3' || alarmStatus=='4'){
                type='warning'
            }
            if(status=='inactive'){
                type='off'
            }
            return type
        }
    },
    created(){
        this.splitRules();
    },
    methods:{
        //储液罐刻度分发
        splitRules(){
            let {jarHeight} = this.info;
            let max = jarHeight;
            let baseNumber = Math.ceil(jarHeight/5);
            let rules = [];
            for(let i=0;i<max;i+=baseNumber){
                rules.push(i);
            };
            rules.push(max);
            this.rules = rules.reverse();
        },
        //点击事件
        showInfo(type){
            this.$emit('info',{type,info:this.info})
        }
    }
}
</script>
<style lang="scss" scoped>
.monitor_item{
    width: 100%;
    padding: 15px;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
    .no{
        margin-bottom: 10px;
        margin-left: 28px;
    }
    .monitor_main{
        width: 100%;
        .monitor_side{
            position: relative;
            width: 100px;
            flex-shrink: 0;
            .monitor_rules{
                position: absolute;
                left: -15px;
                top: 0;
                height: 100%;
                display: flex;
                align-content: space-between;
                justify-content: space-between;
                .rule{
                    position: relative;
                    width: 38px;
                    font-size: 10px;
                    transform: scale(.8);
                    color: #666;
                    text-align: right;
                    &::after{
                        content:'';
                        position: absolute;
                        right: -15px;
                        top: 50%;
                        height: 1px;
                        width: 10px;
                        background: #aaa;
                    }
                }
            }
            .monitor_coontainer{
                position: relative;
                height: 100%;
                margin-left: 22px;
                border: 1px solid #e4e4e4;
                border-radius: 0 0 4px 4px;
                overflow: hidden;
                .info{
                    position: relative;
                    height: 100%;
                    justify-content: center;
                    align-items: center;
                    font-size: 14px;
                    z-index: 9;
                    font-weight: 500;
                    .status_text{
                        margin-bottom: 10px;
                        color: #52c41a;
                    }
                    .volume{
                        color: #333;
                    }
                }
                .monitor_deep{
                    position: absolute;
                    left: -1px;
                    bottom: 0;
                    right: -1px;
                    border-radius: 0 0 4px 4px;
                    background: rgba($color: #1890ff, $alpha: .4);
                    z-index: 0;
                    &.high{
                        background: rgba($color: #ce0508, $alpha: .9);
                    }
                    &.warning{
                        background: rgba($color: #ff4d4f, $alpha: .9);
                    }
                    &.off{
                        background: rgba($color: #333, $alpha: .3);
                    }
                }
            }
        }
        .monitor_info{
            flex: 1;
            margin-left: 10px;
            overflow: hidden;
            .info_item{
               font-size: 13px;
               align-items: center;
               overflow: hidden;
               .label{
                   width: 85px;
                   text-align: right;
                   flex-shrink: 0;
                   color: #989898;
               }
               .desc{
                   flex: 1;
                   color: #232323;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   white-space: nowrap;
               }
            }
        }
    }
    .monitor_controls{
        margin-top: 15px;
        justify-content: space-between;
    }
}
.desc{
    align-items: center;
    .status{
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 100%;
    }
    .status_text{
        margin-left: 5px;
        font-size: 12px;
    }
}
.off{
    .status{
        background: #999;
    }
    .status_text,
    .status_text .dictionary{
        color: #999;
    }
}
.normal{
    .status{
        background: #52c41a;
    }
    .status_text,
    .status_text .dictionary{
        color: #52c41a;
    }
}
.warn{
    .status{
        background: #ff4d4f;
    }
    .status_text,
    .status_text .dictionary{
        color: #ff4d4f;
    }
}
</style>